import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';

<Meta
  title="Components/Switch"
  component="bl-switch"
  argTypes={{
    disabled: {
      control: 'boolean',
      default: false
    },
    checked: {
      control: 'boolean',
      default: false
    },
  }}
/>

export const SwitchTemplate = (args) => html`
<bl-switch
  class="${ifDefined(args.class)}"
  ?disabled=${args.disabled}
  ?checked=${args.checked}>
</bl-switch>
`;

export const SwitchWithLabel = (args) => html`
  <bl-switch
    ?disabled=${args.disabled}
    ?checked=${args.checked}
    aria-label="${args.label}"
  >${args.label}</bl-switch>
`;

export const SwitchStyled = args => html`
<style>
  .${args.class} {
    ${Object.entries(args.styles)
      .map(([key, value]) => `${key}: ${value};`)
      .join('\n    ')}
  }
</style>
${SwitchTemplate(args)}
`;

# Switch

<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/266)</bl-badge>
<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=118%3A4070)</bl-badge>
<bl-badge icon="check_fill">RTL Supported</bl-badge>

Switch component can be used to toggle On or Off states of any single item.

### Usage

Switch can be used as an action button to quickly toggle the state.

* Clicking on switch triggers the action immediately, it shouldn't require users to click an extra button to apply or save the settings.
* You can use your own label outside of this component, but please set `aria-label` attribute whenever you do so.
* Switch doesn't have an indeterminate state.
* Switch should not be used as an input field. For boolean inputs, use [checkbox](/?path=/docs/components-checkbox--basic-usage) instead.

## Basic

Switch is _Off_ by default.

<Canvas>
  <Story name="Basic Usage">
    {SwitchTemplate.bind({})}
  </Story>
</Canvas>

Switch with label.

<Canvas>
  <Story name="Switch with label" args={{ label: "Label for Switch" }}>
    {SwitchWithLabel.bind({})}
  </Story>
</Canvas>

## Checked

_On_ state can be set via `checked` attribute.

<Canvas>
  <Story name="Checked" args={{ checked: true }}>
    {SwitchTemplate.bind({})}
  </Story>
</Canvas>

## Disabled

Disabled state can be set via `disabled` attribute. A switch can be `disabled` and `checked` at the same time.

<Canvas>
  <Story name="Disabled" args={{ disabled: true }}>
    {SwitchTemplate.bind({})}
  </Story>
  <Story name="Disabled and Checked" args={{ disabled: true, checked: true }}>
    {SwitchTemplate.bind({})}
  </Story>
</Canvas>

## Customization

To customize colors for the switch component, you can utilize CSS properties `--bl-switch-color-on` and `--bl-switch-color-off`.

Please note that the usage of `--bl-switch-color` is deprecated and should be replaced with `--bl-switch-color-on`.

We strongly advise against customizing switch with any colors other than success (indicating _on_) and danger (indicating _off_) colors. If you wish to use a different color scheme, we suggest you consider about your theming. You can refer to the [documentation on customizing the Baklava theme](/docs/documentation-customizing-baklava-theme--page#customizing-baklava-theme) for more information.

<Canvas>
  <Story
    name="Customizing Colors"
    args={{
      class: 'colored-switch-1',
      styles: {
        '--bl-switch-color-on': 'var(--bl-color-success)',
        '--bl-switch-color-off': 'var(--bl-color-danger)',
      },
    }}
  >
    {SwitchStyled.bind({})}
  </Story>
  <Story
    name="Customizing Colors Checked"
    args={{
      class: 'colored-switch-2',
      styles: {
        '--bl-switch-color-on': 'var(--bl-color-success)',
        '--bl-switch-color-off': 'var(--bl-color-danger)',
      },
      checked: true,
    }}
  >
    {SwitchStyled.bind({})}
  </Story>
</Canvas>

## RTL Support

The switch component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div>
        <iframe
          srcdoc="
            <html dir='rtl'>
              <head>
                <script type='module' src='https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/baklava.js'></script>
                <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/themes/default.css'>
                <style>
                  body { margin: 0; display: flex; flex-direction: column; align-items: flex-end; }
                  bl-switch { display: block; margin-bottom: 8px; }
                </style>
              </head>
              <body>
                <bl-switch>تفعيل الإشعارات</bl-switch>
                <bl-switch checked>الوضع الداكن</bl-switch>
                <bl-switch disabled>خيار معطل</bl-switch>
              </body>
            </html>
          "
          style="border: none;"
        ></iframe>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>Baklava Switch RTL Example</title>
  <!-- Import Baklava's CSS and JavaScript -->
  <script type="module" src="https://unpkg.com/@trendyol/baklava@2.6.0/dist/baklava.js"></script>
  <style>
    .container {
      margin: 20px;
    }
    .switch-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="switch-group">
      <h3>RTL Switches</h3>
      <bl-switch>تفعيل الإشعارات</bl-switch>
      <bl-switch checked>الوضع الداكن</bl-switch>
      <bl-switch disabled>خيار معطل</bl-switch>
    </div>
  </div>

  <script>
    // Example of creating a switch programmatically
    const createSwitch = () => {
      const switchEl = document.createElement('bl-switch');
      switchEl.textContent = 'تفعيل الإشعارات';
      document.querySelector('.switch-group').appendChild(switchEl);
    };
  </script>
</body>
</html>
```

## Reference

<ArgsTable of="bl-switch" />

